<script setup lang="ts">
import { useRequest } from 'vue-request'
import { fetchInvoiceTitleListAPI } from '@/apis/fetchInvoiceTitleList'
import { useUserInfoStore } from '@/store/userInfo'
import { InvoiceTitleType } from '@/types/enum'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const { data, loading } = useRequest(() => fetchInvoiceTitleListAPI(
  {},
  userInfoStore.userInfo!.token,
).then(res => res.data?.data))

function handleAddInvoiceTitle() {
  router.push('editingTitleForm')
}

function handleEditInvoiceTitle() {
  router.push('editingTitleForm')
}
</script>

<template>
  <Spacer height="30" />
  <view class="px-24rpx">
    <view class="absolute left-1/2 top-1/2 text-28rpx text-#333333 -translate-1/2">
      暂无数据
    </view>
    <InvoiceTitle
      v-for="item in data"
      :id="item.taixer"
      :key="item.id"
      :title-type="InvoiceTitleType.enterprise"
      :title="item.invoice_name"
      @edit="handleEditInvoiceTitle"
    />
  </view>
  <Spacer height="180" />
  <view class="fixed bottom-40rpx x-center">
    <RGButton @tap="handleAddInvoiceTitle">
      添加发票抬头
    </RGButton>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'invoiceTitleList'
style:
  navigationBarTitleText: '常用发票抬头'
</route>
